<template>
  <div id="notice" v-loading.fullscreen.lock="fullscreenLoading"
              element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">
    <el-container>
      <el-header height="100px">
        <div class="container flexbox">
          <div class="logo">
             <router-link to="/"><img src="./assets/zgs_log.png" width="100%"></router-link>
          </div>
          <div class="nav">
            <el-breadcrumb separator="|" v-if="status">
              <el-breadcrumb-item>欢迎您: {{userName}}</el-breadcrumb-item>   
              <el-breadcrumb-item ><span @click="logout">退出</span></el-breadcrumb-item>
            </el-breadcrumb>
            <el-breadcrumb separator="|" v-else>
              <el-breadcrumb-item>说明</el-breadcrumb-item>
              <el-breadcrumb-item><router-link to="/register">注册</router-link></el-breadcrumb-item>
              <el-breadcrumb-item><router-link to="/login">登录</router-link></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="location">
          <i class="el-icon-location-outline"></i><span>首页</span>
           <i class="el-icon-arrow-right"></i><span>{{type}}</span>
            <i class="el-icon-arrow-right"></i><span>{{item}}</span>
        </div>
        <div class="content">
          <div class="notice-main-center">
            <dt>
                <template v-for="item in notice">
                  <dl>
                              <router-link :to="{path:'/noticeDetail',query:{id:item.id}}">
                                <p class="top">
                                  <span class="noticeTitle"><i class="el-icon-menu"></i>{{item.title}}</span>
                                  <span style="display: inline-block;overflow:hidden;"><i class="el-icon-location" style="color:#409EFF;" v-if="item.istop"></i></span>
                                </p>
                              </router-link>
                              <span style="float:right"></i>{{item.modified}}</span>
                            </dl>
                </template>
            </dt>
          </div>
          <div class="pages">
            <el-pagination
              background
            
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              layout="prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
        <div style="margin:20px 0;text-align:center;">
          <el-button type="primary" @click="gotoIndex">返回首页</el-button>
        </div>
        <footer>
          @copyright
        </footer>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      status:false,
      userName:'',
      total:0,
      pageSize:10,
      type:'',
      item:'',
      notice:[],
      fullscreenLoading:false
    }

  },
  mounted(){
    this.getNavInfo();
    this.getAllNotice();
    this.getInfo();
  },
  methods:{
    getInfo(){
      var that=this;
      let user = JSON.parse(window.sessionStorage.getItem('access-user'))
      if (!user){
        this.status=false;
      }else{
        this.status=true;
        //this.fullscreenLoading=true;
        this.axios({
          url:this.host+'/3v1t.smserver.cn/index.php/student/Modifysysinfo/getinfo',
          method:'post',
          headers:{
                "Content-type":"application/json"
              }

        }).then((res)=>{
          //this.fullscreenLoading=false;
          //console.log(res);
          that.userName=res.data.data.account;
        })
      }
    },
    getNotice(mess){
      var that=this;
      this.fullscreenLoading=true;
      this.axios({
          url:this.host+'/3v1t.smserver.cn/index.php/index/index/listinfo',
          method:'post',
          data:JSON.stringify(mess),
          headers:{
                "Content-type":"application/json"
              }
        }).then((res)=>{
          console.log(res);
          this.fullscreenLoading=false;
          var data=res.data.data;
          that.total=data.count;
          data.data.forEach((item)=>{
            if(item.istop==1){
              item.istop=true;
            }else{
              item.istop=false;
            }
            item.modified=item.modified.split(" ")[0]
          })
          that.notice=res.data.data.data;
        })    
    },
    getAllNotice(){
      var id=location.href.split('?')[1].split("=")[1];
      var message={
        id:id,
        page:1,
        num:this.pageSize
      }
      this.getNotice(message)
    },
    getNavInfo(){
      var id=location.href.split('?')[1].split("=")[1];
      if(id=="11"){
        this.type="三位一体";
        this.item="公告通知"
      }else if(id=="12"){
        this.type="三位一体";
        this.item="报考指南"
      }else if(id=="14"){
        this.type="高水平运动员";
        this.item="公告通知"
      }else if(id=="15"){
        this.type="高水平运动员";
        this.item="报考指南"
      }
    },
    handleCurrentChange(val) {
      console.log(val)
      var id=location.href.split('?')[1].split("=")[1];
      var message={
          id:id,
          page:val,
          num:this.pageSize
      }
      this.getNotice(message);
    },
    gotoIndex(){
      this.$router.push("/");
    },
    logout(){
      var that=this;
      this.axios({
            url:this.host+'/3v1t.smserver.cn/index.php/index/login/signout',
            method:'post',
            headers:{
              "Content-type":"application/json"
            }
          }).then((res)=>{
            console.log(res);            
            sessionStorage.clear();
            //that.$router.push("/");
            that.status=false;
          })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
#notice{
  height:100%;
  .el-container{
    height:100%;
  }
  .container{
    width:1080px;
    margin:0 auto;
  }
  header{
      height:100px;
      background:#393D49;
      display:flex;
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,0.3);
      .flexbox{
        display:flex;
        align-items: center;
        justify-content: space-between;
      }
  }
  footer{
    height:60px;
    text-align:center;
    line-height:60px;
    color:#fff;
    font-size:14px;
    background:#393D49;
  }
  .logo{
    width:500px;
  }
  .nav a,.nav span{
    color:#fff;
    cursor: pointer;
    text-decoration:none;
  }
  
  .el-main{
    padding:0;
    height:100%;
  }
  .location{
    text-align:left;
    width:1080px;
    margin:20px auto;
  }
  .content{
    min-height:80%;
    width:1080px;
    border:1px solid #e8e8e8;
    margin:10px auto;
    position:relative;
  }
  .notice_title{
    border-bottom: 1px solid #e8e8e8;
    line-height: 84px;
    text-align: center;
    font-size: 24px;
    color: #333;
    font-weight: 500;
  }
  .notice-main-center {
    padding: 0 20%;
    text-align:left;
    dt{
      margin:20px 0;
    }
    dl{
      height:35px;
      line-height:35px;
      border-bottom:1px dashed #ccc;
    }
    .noticeTitle{
      max-width:380px;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .top{
      display:inline-block;
    }
  }
  .pages{
    text-align:center;
    margin:20px 0;
    position:absolute;
    bottom:0;
    right:0;
    left:0;
  }
}
</style>
